import React from 'react';
import moment from 'moment';
import { ListView } from 'antd-mobile';
import api from 'js/api/index';
import InfiniteScroll from 'react-infinite-scroller';
import './deviceMgr.scss';
import TableBox from 'views/component/table/table';
import { i18n } from 'js/core/i18n';

let pagesize = 10;

class DeviceMgr extends React.Component {
  constructor() {
    super()
    this.query = {
      pageindex: 1,
      pagesize: pagesize
    }
    this.state = {
      DeviceInfo: {},
      DeviceListPageData: [],
      isLoading: true,
      hasMore: true,
    }
  }
  componentDidMount() {
    this.DeviceLeveData();
  }
  DeviceLeveData = () => {
    api('/Device/DeviceLeveData', { DevId: 0 }).then((data) => {
      this.setState({ DeviceInfo: data.data })
    });
  }
  loadMore = (event) => {
    if (this.state.isLoading && this.state.hasMore) {
      api('/Device/DeviceListPage', this.query).then((data) => {
        this.query.pageindex += 1;
        this.state.DeviceListPageData = this.state.DeviceListPageData.concat(data.data);
        if (data.data.length < pagesize) {
          this.setState({ DeviceListPageData: this.state.DeviceListPageData, hasMore: false })
        } else {
          this.setState({ DeviceListPageData: this.state.DeviceListPageData })
        }
      });
    }
  }
  render() {
    let { DeviceInfo, DeviceListPageData, hasMore } = this.state;
    return <div id="deviceMgr" className="flex-col">
      <div className="statusBox">
        <div className="flex-center bottomBorder pb10">
          <div className="statusItem flex-g-1 rightBorder">
            <div className="statusBoxNumber" style={{ color: '#F88385' }}>
              {DeviceInfo.LeaveVideoNumber}
            </div>
            <div className="statusBoxText">
              {i18n.get("离线录像设备")}
            </div>
          </div>
          <div className="statusItem flex-g-1">
            <div className="statusBoxNumber" style={{ color: '#7BB2FD' }}>
              {DeviceInfo.LeaveCustomerNumber}
            </div>
            <div className="statusBoxText">
            {i18n.get("离线客流设备")}
            </div>
          </div>
        </div>
        <div className="flex-center mt10">
          <div className="statusItem flex-g-1 rightBorder">
            <div className="statusBoxNumber" style={{ color: '#FABF76' }}>
              {DeviceInfo.LeaveFaceNumber}
            </div>
            <div className="statusBoxText">
            {i18n.get("离线人脸设备")}
            </div>
          </div>
          <div className="statusItem flex-g-1 rightBorder">
            <div className="statusBoxNumber" style={{ color: '#D097FB' }}>
              {DeviceInfo.LeaveEASNumber}
            </div>
            <div className="statusBoxText">
            {i18n.get("离线EAS设备")}
            </div>
          </div>
          <div className="statusItem flex-g-1">
            <div className="statusBoxNumber" style={{ color: '#7EE3D4' }}>
              {DeviceInfo.LeaveOtherNumber}
            </div>
            <div className="statusBoxText">
            {i18n.get("离线其他设备")}
            </div>
          </div>
        </div>
      </div>
      <div className="flex-g-1 scroll-absolute">
        <div>
          <InfiniteScroll
            pageStart={0}
            useWindow={false}
            loadMore={this.loadMore}
            hasMore={hasMore}
            threshold={50}
          >
            <TableBox heads={[i18n.get('序列号'), i18n.get('设备类别'), i18n.get('所属门店'), i18n.get('设备状态')]} >
              {DeviceListPageData.map((item, index) => (
                <tr key={item.DeviceID}>
                  <td>{item.DeviceID}</td>
                  <td>{item.DeviceTypeName}</td>
                  <td>{item.ShopName}</td>
                  <td>{item.DeviceStatusName}</td>
                </tr>
              ))}
            </TableBox>

          </InfiniteScroll>
        </div>
      </div>
    </div>
  }
}

export default DeviceMgr;